<?xml version="1.0" encoding="utf-8" ?>
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:p="http://primefaces.org/ui"
    xmlns:com="http://java.sun.com/jsf/composite/componentes"
    xmlns:f="http://java.sun.com/jsf/core">
<ui:composition>
    <h:outputStylesheet library="css" name="mapas.css" />

    <p:dialog
        id="modalCadastro"
        widgetVar="modalCadastro"
        modal="true"
        header="#{appMessages['pontosColeta.cadastrar.titulo']}"
        dynamic="true"
        width="950"
        resizable="false">
        
        <h:form id="cadastroCidade"
			rendered="#{!pontosColetaBean.existeCorpoHidrico()}">
			<h:outputText
				value="#{appMessages['pontosColeta.cadastrar.naoExisteCorpoHidrico']}"
				escape="false" />
			<h:link value="#{messages['link.cadastrarCorpoHirico']}"
				outcome="/corpos-hidricos" />
		</h:form>
        
        <h:panelGrid columns="2" rendered="#{pontosColetaBean.existeCorpoHidrico()}">
            <h:form id="formPontoColeta" >
                <p:messages globalOnly="true" />
            
                <p:fieldset legend="#{appMessages['pontosColeta.cadastrar.dadosPonto']}" style="width: 480px;">
                    <com:formInput id="nome" label="#{appMessages['pontosColeta.nome']}">
                        <p:inputText
                            id="input"
                            label="#{appMessages['pontosColeta.nome']}"
                            value="#{pontosColetaBean.pontoColeta.nome}"
                            required="true" />
                    </com:formInput>
                    
                    <com:formInput id="descricao" label="#{appMessages['pontosColeta.descricao']}">
                        <p:inputText
                            id="input"
                            label="#{appMessages['pontosColeta.descricao']}"
                            value="#{pontosColetaBean.pontoColeta.descricao}" />
                    </com:formInput>
                    
                    <com:formInput id="pontoReferencia" label="#{appMessages['pontosColeta.pontoReferencia']}">
                        <p:inputText
                            id="input"
                            label="#{appMessages['pontosColeta.pontoReferencia']}"
                            value="#{pontosColetaBean.pontoColeta.pontoReferencia}" />
                    </com:formInput>
                    
                    <com:formInput id="bacia" label="#{appMessages['pontosColeta.bacia']}">
                        <p:selectOneMenu
                            id="input"
                            label="#{appMessages['pontosColeta.bacia']}"
                            value="#{pontosColetaBean.baciaHidrograficaSelecionada}"
                            required="true">
                            <f:selectItem itemLabel="#{messages['form.selecione']}" noSelectionOption="true" />
                            <f:selectItems
                                value="#{pontosColetaBean.baciasHidrograficas}"
                                var="baciaHidrografica"
                                itemLabel="#{baciaHidrografica.nome}"
                                itemValue="#{baciaHidrografica}" />
                            <p:ajax
                                event="change"
                                update=":formPontoColeta:cidade :formPontoColeta:corpoHidrico bacia"
                                listener="#{pontosColetaBean.atualizarBaciaHidrografica()}" />
                        </p:selectOneMenu>
                    </com:formInput>
                    
                    <com:formInput id="cidade" label="#{appMessages['pontosColeta.cidade']}">
                        <p:selectOneMenu
                            id="input"
                            label="#{appMessages['pontosColeta.cidade']}"
                            value="#{pontosColetaBean.pontoColeta.cidade}"
                            required="true"
                            converter="br.senai.sc.hidroData.CidadeConverter"
                            disabled="#{pontosColetaBean.baciaHidrograficaSelecionada == null}">
                            <f:selectItem itemLabel="#{messages['form.selecione']}" noSelectionOption="true" />
                            <f:selectItems
                                value="#{pontosColetaBean.baciaHidrograficaSelecionada.cidades}"
                                var="cidade"
                                itemLabel="#{cidade.nome}"
                                itemValue="#{cidade}" />
                            <p:ajax
                                event="change"
                                update=":formPontoColeta:corpoHidrico" />
                        </p:selectOneMenu>
                    </com:formInput>
                    
                    <com:formInput id="corpoHidrico" label="#{appMessages['pontosColeta.corpoHidrico']}">
                        <p:selectOneMenu
                            id="input"
                            label="#{appMessages['pontosColeta.corpoHidrico']}"
                            value="#{pontosColetaBean.pontoColeta.corpoHidrico}"
                            required="true"
                            disabled="#{pontosColetaBean.pontoColeta.cidade == null}"
                            style="width: 280px;">
                            <f:selectItem itemLabel="#{messages['form.selecione']}" noSelectionOption="true" />
                            <f:selectItems
                                value="#{pontosColetaBean.corposHidricos}"
                                var="corpoHidrico"
                                itemLabel="#{corpoHidrico.nome}"
                                itemValue="#{corpoHidrico}" />
                        </p:selectOneMenu>
                    </com:formInput>
                    
                    <com:formInput id="latitude" label="#{appMessages['pontosColeta.latitude']}">
                        <p:inputText
                            id="input"
                            required="true"
                            label="#{appMessages['pontosColeta.latitude']}"
                            value="#{pontosColetaBean.pontoColeta.latitude}">
                            <p:ajax event="change" update=":panelMapaCadastro latitude" />
                        </p:inputText>
                    </com:formInput>
                    
                    <com:formInput id="longitude" label="#{appMessages['pontosColeta.longitude']}">
                        <p:inputText
                            id="input"
                            required="true"
                            label="#{appMessages['pontosColeta.longitude']}"
                            value="#{pontosColetaBean.pontoColeta.longitude}">
                            <p:ajax event="change" update=":panelMapaCadastro longitude" />
                        </p:inputText>
                    </com:formInput>
                    
                    
                    <com:inputNumber
                            id="altitude"
                            label="#{appMessages['pontosColeta.altitude']}"
                            value="#{pontosColetaBean.pontoColeta.altitude}"
                            required="true"
                            max="999999999.999"
                            min="0.000" />

                </p:fieldset>
                
                <p:toolbar>
                    <p:toolbarGroup>
                        <p:commandButton
                            value="#{messages['form.salvar']}"
                            update="@form :formPontosColeta:dtPontosColeta"
                            action="#{pontosColetaBean.salvarPontoColeta()}" />
                        <p:commandButton
                            value="#{messages['form.cancelar']}"
                            process="@this"
                            onclick="modalCadastro.hide();" />
                    </p:toolbarGroup>
                </p:toolbar>
            </h:form>
            
            <h:panelGroup id="panelMapaCadastro">
                <com:mapaPontoColeta
                    renderMap="#{pontosColetaBean.mostrarMapa}"
                    mapWidth="400"
                    mapHeight="450"
                    longitude="#{pontosColetaBean.pontoColeta.longitude}"
                    latitude="#{pontosColetaBean.pontoColeta.latitude}"
                    id="mapaCadastro"
                    model="#{pontosColetaBean.marcadoresMapa}" />
            </h:panelGroup>
        </h:panelGrid>
    </p:dialog>
</ui:composition>
</html>